<!--
 * @Author: WeijianXu weijian.xu@unidt.com
 * @Date: 2024-04-29 10:38:11
 * @LastEditors: WeijianXu weijian.xu@unidt.com
 * @LastEditTime: 2024-04-29 11:02:20
 * @FilePath: \echarts5-test\src\views\start\transition.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { ref } from 'vue';
const dataset = {
  dimensions: ['name', 'score'],
  source: [
    ['Hannah Krause', 314],
    ['Zhao Qian', 351],
    ['Jasmin Krause ', 287],
    ['Li Lei', 219],
    ['Karle Neumann', 253],
    ['Mia Neumann', 165],
    ['Böhm Fuchs', 318],
    ['Han Meimei', 366]
  ]
};
const pieOption = {
  dataset: [dataset],
  series: [
    {
      type: 'pie',
      // 通过 id 关联需要过渡动画的系列
      id: 'Score',
      // radius: [0, '50%'],
      radius: ['30%', '50%'],
      roseType: 'angle',
      itemStyle: {
        borderRadius: [20, 20, 10, 5],
        borderColor: '#fff',
        borderWidth: 4
      },
      universalTransition: true,
      animationDurationUpdate: 1000
    }
  ]
};
const barOption = {
  dataset: [dataset],
  xAxis: {
    type: 'category'
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      // 通过 id 关联需要过渡动画的系列
      id: 'Score',
      // 每个数据都是用不同的颜色
      colorBy: 'data',
      encode: { x: 'name', y: 'score' },
      universalTransition: true,
      animationDurationUpdate: 1000
    }
  ]
};

const option = ref(barOption);
const optionType = ref('bar');

setInterval(() => {
  option.value = optionType.value === 'pie' ? barOption : pieOption;
  optionType.value = optionType.value === 'pie' ? 'bar' : 'pie';
}, 2000);
</script>

<template>
  <echart :option="option"></echart>
</template>
